<template>
	<div class="box common-layout" mode="horizontal" router=true>
		<el-container>
			<el-header class="el-header1">
				<div @click="this.$router.push('/')" class="logo">
					<img style="width: 72px;" src="../assets/logo.png" />
				</div>
				<div class="title">
					<h2>吃了么订餐后台管理系统</h2>
				</div>
				<p class="profile-photo">
					<!-- 用户头像 -->
					<el-avatar :src="user.profilePhotoUrl"></el-avatar>
					<!-- <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar> -->
					<span>管理员</span>
				</p>

			</el-header>
			<el-container class="el-container1">
				<!-- width="200px" -->
				<el-aside class="el-aside">
					<!-- <div class="el-sider"> -->
					<el-menu class="el-menu1 el-menu-vertical-demo" default-active="2" @open="handleOpen"
						@close="handleClose">
						<el-sub-menu index="1">
							<template #title>
								<el-icon>
									<home-filled />
								</el-icon>
								<span>系统管理</span>
							</template>
							<el-menu-item-group>
								<!-- <template #title><span>用户</span></template> -->
								<el-menu-item index="1-1">用户管理</el-menu-item>
								<el-menu-item index="1-2">修改密码</el-menu-item>
								<el-menu-item @click="logout()">退出登录</el-menu-item>
							</el-menu-item-group>

						</el-sub-menu>

						<el-sub-menu index="2">
							<template #title>
								<el-icon>
									<user />
								</el-icon>
								<span>用户管理</span>
							</template>
							<el-menu-item-group>
								<!-- <template #title><span>用户</span></template> -->
								<el-menu-item index="2-1">用户统计</el-menu-item>
								<el-menu-item index="2-2">用户信息</el-menu-item>
								<el-menu-item index="2-3">签到管理</el-menu-item>
							</el-menu-item-group>

						</el-sub-menu>
						<el-sub-menu index="3" mode="horizontal" router=true>
							<template #title>
								<el-icon>
									<stopwatch />
								</el-icon>
								<span>菜品管理</span>
							</template>
							<el-menu-item-group mode="horizontal" router=true>
								<el-menu-item index="3-1" @click="dishesList()">所有菜品</el-menu-item>
								<el-menu-item index="3-2" @click="addDishes()">添加菜品</el-menu-item>
								<el-menu-item index="3-3" @click="toDishesTypeList()">菜品分类</el-menu-item>
							</el-menu-item-group>
						</el-sub-menu>
						<el-sub-menu index="4" mode="horizontal" router=true>
							<template #title>
								<el-icon>
									<stopwatch />
								</el-icon>
								<span>订单管理</span>
							</template>
							<el-menu-item-group mode="horizontal" router=true>
								<el-menu-item @click="toOrdersList()">订单列表</el-menu-item>
							</el-menu-item-group>
						</el-sub-menu>

						<el-sub-menu index="5">
							<template #title>
								<el-icon>
									<coordinate />
								</el-icon>
								<span>店铺管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="5-1" @click="getShop()">店铺列表</el-menu-item>
								<el-menu-item index="5-2" @click="auditShop()">审核列表</el-menu-item>
							</el-menu-item-group>
						</el-sub-menu>
						<el-sub-menu index="6">
							<template #title>
								<el-icon>
									<coordinate />
								</el-icon>
								<span>红包管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="6-1" @click="myAssetsList()">红包列表</el-menu-item>
								<el-menu-item index="6-2" @click="shopCasCouponList()">代金券列表</el-menu-item>
								<!-- <el-menu-item @click="myAssetsAdd()">添加红包/代金券</el-menu-item> -->
							</el-menu-item-group>

						</el-sub-menu>
						<el-sub-menu index="7">
							<template #title>
								<el-icon>
									<coordinate />
								</el-icon>
								<span>收藏管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="7-1" @click="toCollectionList()">收藏列表</el-menu-item>
							</el-menu-item-group>

						</el-sub-menu>

					</el-menu>
					<!-- </div> -->
				</el-aside>
				<el-main>
					<router-view />
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<script>
	import storage from '@/utils/localstorage'
	import {
		HomeFilled,
		User,
		Stopwatch,
		Coordinate

	} from '@element-plus/icons-vue'
	export default {
		components: {
			HomeFilled: HomeFilled,
			User: User,
			Stopwatch: Stopwatch,
			Coordinate: Coordinate
		},
		name: "Admin",
		data() {
			return {
				user: {},
			}
		},
		mounted() {
			//调用接口让过滤器拦截页面
			this.$axios.get('/dishes/test')
				.then(res => {
					console.log(res);
				})
		},
		methods: {
			getUserInfo() {
				this.$axios.get('/user/info/userId')
					.then(res => {
						// console.log("data=" + res)
						this.user = res.data;
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			toCollectionList() {
				this.$router.push('/collection')
			},
			myAssetsAdd() {
				this.$router.push('/myAssetsAdd')
			},
			addDishes() {
				this.$router.push('/addDishes')
			},
			dishesList() {
				this.$router.push('/dishesList')
			},
			toDishesTypeList() {
				this.$router.push("/dishesTypeList")
			},
			toDishesCollection() {
				this.$router.push('/dishesCollection')
			},
			toOrdersList() {
				this.$router.push('/ordersList')
			},
			getShop() {
				this.$router.push('/shop')
			},
			//注销登录,退出登录
			logout() {
				console.log("退出登录")
				//移除 uid和 token
				storage.remove('userId') //移除uid
				storage.remove('token') //移除token
				this.$router.replace('/login');
			},
			getAddShop() {
				this.$router.push('/addShop')
			},
			auditShop() {
				this.$router.push('/auditShop')
			},
			myAssetsList() {
				this.$router.push('/myAssetsList')
			},
			shopCasCouponList() {
				this.$router.push('/shopCasCouponList')
			},

		}
	}
</script>
<style>
	.box {
		/* display: flex; */
		position: relative;
		
	}
	.el-header1{
		display: flex;
	}
	.logo {
		display: flex;
		width: 400px;
		flex-direction: column ;
		align-items: flex-start;
		/* float: left; */
	}
	.title {
		/* float: left; */
		display: flex;
		/* flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 */
		/* flex-flow: column  nowrap; */
		flex-direction: column;
		justify-content: center; 
		/* align-items: center; */
		/* padding-left: 600px; */
	}
	.profile-photo {
		/* border: 1px black solid; */
		/* margin-top: 6px; */
		/* border: ; */
		padding-left: 1200px;
	}
	.el-container1 {
		border: 1px lightgrey solid;
		position: relative;
		width: 1350px;
		left: 160px;
		top: 10px;
	}
	.el-aside {
		/* width: 100%; */
		/* border: 1px black dashed; */
		position: fixed;
		z-index: 10;
		width: 160px;
		height: 800px;
		top: 70px;
		left: 6px;
		margin: 14px 0px 0px 0px;
		--el-aside-width: 188px;
	}
	.el-menu1 {
		/* border: 1px lightgrey solid; */
	}


	/* 头部 */
	.common-layout .el-header,
	.common-layout .el-footer {
		text-align: center;
		/* line-height: 20px; */
	}

	.common-layout>.el-container {
		margin-bottom: 2px;
	}
</style>
